<template>
    <div>
        <Card>
            我是用Vxe组件:
            <vxe-input v-model="val1" placeholder="默认尺寸"></vxe-input>
            {{ val1 }}
            <vxe-button>点击</vxe-button>
            <div style="margin-top: 10px;">
                <vxe-button @click="insertEvent">新增</vxe-button>
                <vxe-button>编辑</vxe-button>
                <vxe-button @click="save">保存</vxe-button>
                <vxe-button>取消</vxe-button>
            </div>
        </Card>6
        <Card style="margin-top: 10px;">
            <div style="margin-bottom: 10px;">我是Vxe表格使用:</div>
            <vxe-table ref="table" show-footer border height="400" :edit-config="{
                trigger: 'click', mode: 'row', enabled: true,
            }" :data="tableData" :footer-data="footerData">
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column field="seq" title="序号" width="60"></vxe-column>
                <vxe-column field="name" title="Name" :edit-render="{}">
                    <template #edit="{ row }">
                        <vxe-input v-model="row.name" type="text"></vxe-input>
                    </template>
                </vxe-column>
                <vxe-column field="age" title="Age" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                        <vxe-input v-model="row.age" type="number" :min="1" :max="120"></vxe-input>
                    </template>
                </vxe-column>
                <vxe-column field="date" title="Date" :edit-render="{}">
                    <template #edit="{ row }">
                        <vxe-input v-model="row.date" type="text"></vxe-input>
                    </template>
                </vxe-column>
                <vxe-column field="address" title="Address" :edit-render="{}">
                    <template #edit="{ row }">
                        <vxe-input v-model="row.address" type="text"></vxe-input>
                    </template>
                </vxe-column>
            </vxe-table>
        </Card>
    </div>
</template> 
  
<!-- <template>
    <div>
        <Card>
            <vxe-button @click="insertEvent" v-if="isinsert">新增</vxe-button>
            <vxe-button @click="edEvent">{{ !isenabled ? "编辑" : "取消" }}</vxe-button>
            <vxe-button @click="removeEvent">删除</vxe-button>
            <vxe-button @click="saveEvent">保存</vxe-button>
        </Card>
        <Card>
            <vxe-table border :loading="loading" :column-config="{ resizable: true }" stripe keep-source show-footer
                show-overflow ref="tableRef" height="500" class="editable-footer" :row-config="{ isHover: true }"
                :footer-method="footerMethod" :footer-cell-class-name="footerCellClassName" :data="tableData" :edit-config="{
                    trigger: 'click', mode: 'row', enabled: isenabled,
                }" @checkbox-change="checkboxChange" @edit-actived="handleEditActived" @edit-closed="editClosedEvent"
                @cell-click="handleCellClick">
                <vxe-column type="checkbox" width="60"></vxe-column>
                <vxe-column type="seq" width="90">
                    <template #default="{ rowIndex }">
                        <div>
                            {{ rowIndex + 1 }}
                            <vxe-button @click="insertButton" v-if="!isinsert">新增</vxe-button>
                        </div>
                    </template>
                </vxe-column>
                <vxe-column field="name" title="Name" :edit-render="{}" width="300">
                    <template #default="{ row }">
                        <span @click="apk">
                            {{ row.name }}
                        </span>
                    </template>
                    <template #edit="{ row }">
                        <vxe-input v-model="row.name" type="text"></vxe-input>
                    </template>
                </vxe-column>
                <vxe-column width="300" field="age" title="Age" :edit-render="{ autofocus: '.vxe-input--inner' }">
                    <template #edit="{ row }">
                        <vxe-input v-model="row.age" type="number" :min="1" :max="120"></vxe-input>
                    </template>
                </vxe-column>
                <vxe-column field="date" title="Date" :edit-render="{}" width="300">
                    <template #edit="{ row }">
                        <vxe-select v-model="row.date" clearable transfer>
                            <vxe-option v-for="item in roleList" :key="item" :value="item" :label="item"></vxe-option>
                        </vxe-select>
                    <vxe-input v-model="row.date" type="text"></vxe-input>
                    </template>
                </vxe-column>
                <vxe-column field="address" title="Address" :edit-render="{}" width="300">
                    <template #edit="{ row }">
                        <vxe-input v-model="row.address" type="text"></vxe-input>
                    </template>
                </vxe-column>
            </vxe-table>
        </Card>
    </div>
</template>  -->
<script lang="ts" setup>
import { Card } from 'ant-design-vue';
import { ref } from 'vue'

import { VxeInput, VxeTable, VxeColumn, VxeButton } from 'vxe-table';
let val1 = ref(0)

const tableData = ref([
    { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
    { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
    { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
    { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
    { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
    { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' }
])

const footerData: any = ref([
    { seq: '合计', age: '282' }
])

function save() {
    footerData.value[0].seq = '总数'
    footerData.value[0].num = '999'
}

async function insertEvent() {
    const $table = tableRef.value
    if ($table) {
        const record = {
            name: 'New name',
            age: 18
        }
        const { row: newRow } = await $table.insert(record)
        $table.setEditCell(newRow, 'age')
    }
}

// import { VxeButton,VxeTable,VxeColumn,VxeSelect,VxeOption,VxeInput } from 'vxe-table';

// const tableData = ref([
//   { id: 10001, name: 'Test1', role: 'Develop', sex: '0', age: 28, address: 'test abc' },
//   { id: 10002, name: 'Test2', role: 'Test', sex: '1', age: 22, address: 'Guangzhou' },
//   { id: 10003, name: 'Test3', role: 'PM', sex: '0', age: 32, address: 'Shanghai' },
//   { id: 10004, name: 'Test4', role: 'Designer', sex: '1', age: 23, address: 'test abc' },
//   { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
//   { id: 10005, name: 'Test5', role: 'Develop', sex: '1', age: 30, address: 'Shanghai' },
//   { id: 10006, name: 'Test6', role: 'Designer', sex: '1', age: 21, address: 'test abc' }
// ])
// const tableDateLoction = ref([])
// const roleList = ref(['前端', '后端', 'ui'])
// const loading = ref(false)
// const tableRef = ref()
// const isenabled = ref(false)
// const isinsert = ref(true)
// const footerCellClassName = ({ $rowIndex, columnIndex }) => {
//   if (columnIndex === 0) {
//     if ($rowIndex === 0) {
//       return 'col-blue'
//     } else {
//       return 'col-red'
//     }
//   }
// }
// const meanNum = (list, field) => {
//   let count = 0
//   list.forEach(item => {
//     count += Number(item[field])
//   })
//   return count / list.length
// }
// const sumNum = (list, field) => {
//   let count = 0
//   list.forEach(item => {
//     count += Number(item[field])
//   })
//   return count
// }
// const footerMethod = ({ columns, data }) => {
//   return [
//     columns.map((column, columnIndex) => {
//       if (columnIndex === 0) {
//         return '平均'
//       }
//       if (['age'].includes(column.field)) {
//         return meanNum(data, column.field)
//       }
//       return null
//     }),
//     columns.map((column, columnIndex) => {
//       if (columnIndex === 0) {
//         return '和值'
//       }
//       if (['age'].includes(column.field)) {
//         return sumNum(data, column.field)
//       }
//       return null
//     })
//   ]
// }
// const insertEvent = async () => {
//   tableDateLoction.value = tableData.value
//   tableData.value = []
//   const $table = tableRef.value
//   isenabled.value = true
//   if ($table) {
//     const record = {
//       name: '',
//       age: ''
//     }
//     for (let i = 0; i < 4; i++) {
//       const { row: newRow } = await $table.insert(record)
//       $table.setEditCell(newRow, 'age')
//     }
//     isinsert.value = false

//   }
// }
// const insertButton = async () => {
//   let row = -1
//   const $table = tableRef.value
//   if ($table) {
//     const record = {
//       sex: '1',
//       date12: '2021-01-01'
//     }
//     const { row: newRow } = await $table.insertAt(record, row)
//     // await $table.setEditCell(newRow, 'name')
//   }
// }
// const removeEvent = () => {
//   const $table = tableRef.value
//   if ($table) {
//     // $table.removeCheckboxRow()
//     // console.log($table.getCheckboxRecords())  //获取勾选的数据
//   }
// }
// const saveEvent = () => {

//   console.log("allData:", tableData.value)
//   console.log("allData:", tableDateLoction.value)
//   //提交数据给后端
//   // 并且关闭
//   isenabled.value = false
//   isinsert.value = true


//   const $table = tableRef.value


//   if ($table) {
//     const { insertRecords, removeRecords, updateRecords } = $table.getRecordset()
//     console.log("recodes:", insertRecords)
//     tableData.value = [...tableDateLoction.value,...insertRecords]
//     // VXETable.modal.alert(`insertRecords=${insertRecords.length} removeRecords=${removeRecords.length} updateRecords=${updateRecords.length}`)
//   }
// }

// const edEvent = () => {
//   isenabled.value = !isenabled.value
//   if (!isenabled.value) {
//     isinsert.value = true
//     tableData.value = tableDateLoction.value
//     console.log("我点击了取消")
//   }
// }

// //进入编辑时会触发
// function handleEditActived() {
//   console.log("进入编辑时会触发")
// }
// //编辑结束之后触发
// function editClosedEvent() {
//   console.log("编辑结束之后触发")
// }

// function handleCellClick() {
//   if (isenabled.value) return
//   console.log("点击单元格事件")
// }
// function apk() {
//   console.log("dsfdsf")
// }
// //监听复选框
// function checkboxChange(value) {
//   console.log('dsfsdf', value)
// }


</script>

  
